<!-- 知识库 -->
<script lang="ts" setup>
const tableData = [{}, {}, {}, {}, {}, {}, {}]
</script>

<template>
  <div class="KnowledgeLayout">
    <div class="KnowledgeBox wrapper">
      <el-table :show-header="false" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="240">
          <div @click="$router.push('/ParticularsKnowledge')" class="left">
            <img src="@/assets/ss.png" alt="" />
          </div>
        </el-table-column>
        <el-table-column prop="name" label="Name">
          <div @click="$router.push('/ParticularsKnowledge')" class="right">
            <h3>GoLand map中的并发问题——为什么会造成并发问题？该怎么解决？</h3>
            <p>
              GoLand map中的并发问题原因及解决方法！什么是竞态检测器？GoLand
              map中的并发问题原因及解决方法！什么是竞态检测器？GoLand
              map中的并发问题原因及解决方法！什么是竞态检测器？
            </p>
          </div>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination
          background
          :page-sizes="[100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.KnowledgeLayout {
  background-color: #fff;
  .KnowledgeBox {
    .left {
      height: 130px;
    }
    .right {
      height: 130px;
      h3 {
        font: 24px/36px '';
      }
      p {
        font: 18px/24px '';
      }
    }
    .demo-pagination-block {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 70px;
    }
  }
}
</style>
